import React, { JSX } from 'react';
import { Box, Snackbar, SnackbarProps } from "@mui/material";
import { ReactComponent as InfoIcon } from "../../assets/alert-information.svg";
import { ReactComponent as WarningIcon } from "../../assets/alert-warning.svg";
import { ReactComponent as SuccessIcon } from "../../assets/alert-success.svg";
import { MessageTypography, TitleTypography } from "./Typography";
import './index.css';

interface AlertBoxProps extends SnackbarProps {
  severity?: 'info' | 'warning' | 'success';
  title: string;
  message: string;
}

function AlertBox(props: AlertBoxProps): JSX.Element {

  const { severity = 'info', title, message } = props;

  const icons = {
    info: <InfoIcon/>,
    warning: <WarningIcon/>,
    success: <SuccessIcon/>
  };

  return (
    <Snackbar
      className={`alert-box border-${severity} bg-${severity}`}
      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
      {...props}
    >
      <Box className='alert-box-component'>
        <Box className='alert-box-icon'>
          {icons[severity]}
        </Box>
        <Box className='alert-box-content'>
          <TitleTypography className={`title-${severity}`}>
            {title}
          </TitleTypography>
          <MessageTypography>
            {message}
          </MessageTypography>
        </Box>
      </Box>
    </Snackbar>
  );
}

export default AlertBox;